<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

/*#ul li:hover{
background-color:pink;
}*/

</style>
</head>
<body>
	<input type="button" value="点击变色" id="btn">
	<ul id="ul">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

	<script>

		var ulObj = document.getElementById('ul')
		var olObj = ulObj.children
		var btnObj = document.getElementById('btn')


		btnObj.onclick = function(){
			for(var i=0;i<olObj.length;i++){
		// if(i%2 == 0){
		// 	olObj[i].style.backgroundColor = 'red'
		// }else{
		// 	olObj[i].style.backgroundColor = 'yellow'

		// }
//三元表达式
olObj[i].style.backgroundColor = i%2 == 0?'red':'yellow'
}
}

</script>
</body>
</html>